201.オブジェクトベースの単一キャラ

JSONオブジェクトを使って、関連するデータをまとめて管理します。

p5.js oop

Learning OOP Object Oriented Programming

ここから改善の第一歩！JSONオブジェクトを使ってデータを整理します。

改善点: データのまとまり

let obj = {
  x: random(width),
  y: random(height),
  xSpeed: ...,
  ySpeed: ...,
  acceleration: 0.1,
};

1つのキャラの情報が1つのオブジェクトにまとまりました。

変数ベースとの比較

変数ベース	オブジェクトベース
`x`, `y`, `xSpeed`...	`obj.x`, `obj.y`, `obj.xSpeed`...
関連が分かりにくい	1つのキャラとして認識できる

オブジェクト（JSON）の良さ

関連するデータを1つにまとめられる
obj.プロパティ名 でアクセスでき、可読性が高い
データ構造が明確になる

でも、これで問題は解決したのでしょうか？次の202で確認してみましょう。

View Source Code

let W, H, PW, PH
const PADDING_RATIO = 0.2
const MAX_SPEED = 10

let obj;

function prepare() {
  obj = {
    x: random(width),
    y: random(height),
    xSpeed: (Math.random() - 0.5) * MAX_SPEED,
    ySpeed: (Math.random() - 0.5) * MAX_SPEED,
    acceleration: 0.1,
  };
}

function update() {
  obj.x += obj.xSpeed;
  obj.y += obj.ySpeed;

  if (obj.x < 0 + PW) {
    obj.xSpeed += obj.acceleration;
  } else if (obj.x > W - PW) {
    obj.xSpeed -= obj.acceleration;
  }
  
  if (obj.y < 0 + PH) {
    obj.ySpeed += obj.acceleration;
  } else if (obj.y > H - PH) {
    obj.ySpeed -= obj.acceleration;
  }
}

function display() {
  stroke(0);
  fill(0);
  ellipse(obj.x, obj.y, 10, 10);
  text(["1:", Math.floor(obj.x), Math.floor(obj.y)], obj.x + 10, obj.y + 10);
}


// main

function setup() {
  createCanvas(W = windowWidth, H = windowHeight);
  PW = W * PADDING_RATIO
  PH = H * PADDING_RATIO

  prepare();
}

function draw() {
  background(255);

  update();
  display();
}